<!DOCTYPE html>
<html>
	<head>
<style type="text/css">
		a{	
			text-decoration: none;
			display: inline-block;
			padding: 5px 10px;
			border-radius: 5px;
			background-color: PINK;
			color: #fff;
			font-weight: 900;}
h1 {
  color: #333;
  font-size: 36px;
  text-align: center;
}

table {
  margin: 30px auto;
  border-collapse: collapse;
  width: 80%;
  max-width: 800px;
  min-width: 320px;
}

th {
  background-color: #333;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  text-align: left;
}

td {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: 10px;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #000;
}
</style>
	<base href="/orderSystem/view/productcontrol/">
		<meta charset="utf-8">
		<title></title>
		<!-- vue框架： 视图的双向绑定 -->
		<script type="text/javascript" src="../js/vue-2.6.10.js"></script>
		<!--  axios: 进行异步请求（数据来源与网页脱离） -->
		<script type="text/javascript" src="../js/axios.js"></script>
	</head>
<body >
	<h1>商品界面</h1>
	<table id="app">
		<thead>
			<tr>
				<th>id</th>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="u in users">
				<td>{{u.id}}</td>
				<td>{{u.commodityName}}</td>
				<td>{{u.price}}</td>
				<td>
					<a :href="'updatesp.html?id='+u.id">修改</a>
					<a href="javascript:void(0);"  v-on:click="delUser(u.id)">删除</a>
				</td>
			</tr>
			
		</tbody>
	</table>
	<script type="text/javascript">
		let vue = new Vue({
			el: '#app',
			data:{
				users: []
			},
			created(){
				//url: 表示异步请求地址
				axios.get('/orderSystem/selectCommodityAllServlet.do').then(
					function(res_obj){
						//使用获取的数据来给vue对象中的users数据赋值
						vue.users = res_obj.data; 
					}
				).catch(
					function(error_obj){
						alert("网络加载异常！！！");
					}
				)
			},
			methods:{
				delUser: function(id){
					console.log(id);
					//url: 表示异步请求地址
					axios.get('/orderSystem/deleteCommodityServlet.do?id=' + id).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							vue.users = res_obj.data; 
							window.location.href="chaxun.html";
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				}
			}
		});
	</script>
	</body>
</html>